<style scoped>
.layout {
    border: 1px solid #d7dde4;
    background: white;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}

.layout-logo {
    width: 100px;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    float: left;
    position: relative;
    top: 15px;
    left: 20px;
}

.layout-nav {
    width: 320px;
    margin: 0 auto;
    margin-right: 20px;
    background: white;
}
</style>
<template>
<div>

    <Modal v-model="name_device" width="360">
        <p slot="header" style="color:#f60;text-align:center">
            <Icon type="ios-information-circle"></Icon>
            <span>Delete confirmation</span>
        </p>
        <div style="text-align:center">
            <p>输入控制器新的名字</p>
            <Input v-model="new_device_name"/>

        </div>
            <div slot="footer">
                <Button type="error" size="large" long  @click.native="rename">确定</Button>
            </div>
    </Modal>

    <Layout>
        <Sider>
            <Menu theme="light " @on-select="on_menu_sel" width="100%">
                <Submenu name="1">
                    <template slot="title">
                        <Icon type="ios-paper" />
                        模式管理
                    </template>
                    <MenuItem name="1-1">新增模式</MenuItem>
                    <MenuItem name="1-2">删除模式</MenuItem>
                </Submenu>
                <Submenu name="2">
                    <template slot="title">
                        <Icon type="ios-people" />
                        编辑模式
                    </template>
                    <MenuItem name="2-1">查看内容</MenuItem>
                    <MenuItem name="2-2">编辑动作</MenuItem>
                </Submenu>
                <Submenu name="3">
                    <template slot="title">
                        <Icon type="ios-stats" />
                        统计分析
                    </template>
                    <MenuGroup title="使用">
                        <MenuItem name="3-1">新增和启动</MenuItem>
                        <MenuItem name="3-2">活跃分析</MenuItem>
                        <MenuItem name="3-3">时段分析</MenuItem>
                    </MenuGroup>
                    <MenuGroup title="留存">
                        <MenuItem name="3-4">用户留存</MenuItem>
                        <MenuItem name="3-5">流失用户</MenuItem>
                    </MenuGroup>
                </Submenu>
            </Menu>
        </Sider>

        <Content>

              <component v-bind:is="Content"></component>
        </Content>

    </Layout>

</div>
</template>

<script>
import addnormal from './normal/add-normal.vue'
import normaldetail from './normal/normaldetail.vue'
export default {
    
    name: 'HelloWorld',
    components: {
        addnormal
    },
    props: {
        msg: String
    },
    methods: {
        on_menu_sel(name) {
            
            switch(name.toString()){
                case "1-1":

                this.Content = addnormal
                break
                case '2-1':
                this.Content = normaldetail
                break
                default:
                this.Content = null
                break;
            }
        },
        on_device_select(i) {
            this.select_device = i;
            this.name_device = true;
        },
        rename() {
            
            const axios = require('axios')
            var that = this
            var post_data = {
                id: that.select_device.hard_init_id,
                name: that.new_device_name
            }
            axios.post('/name_new_device', post_data).then(function (response) {
                
            }).catch(function (error) {}).then(function () {
                that.get_named_devicd()
            })
            this.name_device = false;
        },
        get_unamed_device() {
            const axios = require('axios');

            var that = this
            this.device_list_data = []
            axios.post('/get_new_devices')
                .then(function (response) {
                    // handle success
                    var data = response.data;
                    if (data.Code == 0) {
                        var d = data.data;
                        var l = []
                        for (var i in d) {
                            that.device_list_data.push({
                                hard_init_id: d[i].id.toString(),
                                caplity: d[i].Type.toString(),
                                state: d[i].Value.toString()
                            });

                        }
                    } else {
                        console.log('not ok')
                    }
                    
                })
                .catch(function (error) {
                    // handle error
                    console.log(error);
                })
                .then(function () {
                    // always executed
                });
        },
        get_named_devicd() {
            var that = this
            const named_device_axios = require('axios');
            this.named_device_list_data = []
            named_device_axios.post('/get_device_info', {
                    id: -1
                })
                .then(function (response) {
                    // handle success
                    var data = response.data;
                    if (data.Code == 0) {
                        var d = data.data;
                        
                        for (var i in d) {
                            
                            var a = d[i]
                            that.named_device_list_data.push({
                                id: a.id.toString(),
                                name: a.Name.toString(),
                                caplity: a.Type.toString(),
                                state: a.Value.toString()

                            });
                        }

                    } else {
                        console.log('not ok')
                    }
                    
                })
                .catch(function (error) {
                    // handle error
                    console.log(error);
                })
                .then(function () {
                    // always executed
                });

        }
    },
    created() {
        this.get_unamed_device()
        this.get_named_devicd()
        this.name_device = false
    },
    computed: {

    },
    data() {
        return {
            Content: null,
            device_list_header: [{
                    title: '地址编码',
                    key: 'hard_init_id'
                },
                {
                    title: '从机能力一览',
                    key: 'caplity'
                },
                {
                    title: '从机状态',
                    key: 'state'
                }
            ],
            named_device_list_header: [{
                    title: 'id',
                    key: 'id'
                },
                {
                    title: '从机能力一览',
                    key: 'caplity'
                },
                {
                    title: '从机状态',
                    key: 'state'
                },
                {
                    title: '从机名称',
                    key: 'name'
                }
            ],
            device_list_data: null,
            named_device_list_data: null,

            name_device: false,
            new_device_name: '',
            select_device: null
        }
    }
}
</script>
